<script setup lang="ts">
import { onMounted, ref } from "vue"
import { Plus } from "@element-plus/icons-vue"
import type { UploadProps } from "element-plus"
import { ElMessage } from "element-plus"
import router from "../../router"
import { AddEmployee, GetEmployee, RemoveEmployee } from "../../api/employee"
import { useRoute } from "vue-router" //1.先在需要跳转的页面引入useRouter
const { params } = useRoute()

const AvatarUploadSuccess = (res) => {
  form.value.photo = res.data
}

const getData = async () => {
  const res = await GetEmployee(params.id)
  form.value = res.data
}

onMounted(() => {
  console.log(params)
  if (params.id !== "0") {
    getData()
  }
})
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  console.log(rawFile.type)
  if (!rawFile.type.includes("image")) {
    ElMessage.error("头像图片格式不符合要求！")
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("头像文件不能大于 10MB!")
    return false
  }
  return true
}
const submitForm = async () => {
  const res: any = await AddEmployee(form.value)
  ElMessage.success(res.message)
  form.value = res.data
}
const returnView = () => {
  router.push("/employee")
}
const deleteEmployee = async () => {
  const res: any = await RemoveEmployee(form.value.employeeId)
  ElMessage.success(res.message)
  returnView()
}
const form: any = ref({
  name: "",
  photo: "",
  gender: "男",
  phone: "",
  email: "",
  position: "",
  birthDate: "",
  hireDate: "",
  department: "",
  workExperience: "",
  remarks: "",
  emergencyContactName: "",
  emergencyContactPhone: ""
})
</script>

<template>
  <div class="editEmployee">
    <div class="content">
      <div class="title">职员录入</div>
      <div class="p-10">
        <el-form size="large" :model="form" label-position="right" label-width="20%">
          <el-row>
            <el-col :span="12">
              <el-form-item label="照片:">
                <el-upload
                  class="avatar-uploader"
                  name="formFile"
                  accept="image/*"
                  action="http://192.168.2.25:5173/api/UploadFile/UploadAvatars"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-success="AvatarUploadSuccess"
                >
                  <img
                    v-if="form.photo"
                    width="200px"
                    :src="'http://192.168.2.25:5173/' + form.photo"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名:">
                <el-input v-model="form.name" placeholder="请输入姓名" />
              </el-form-item>
              <el-form-item label="出生日期:">
                <el-date-picker
                  v-model="form.birthDate"
                  style="width: 100%"
                  placeholder="请输入出生日期"
                />
              </el-form-item>
              <el-form-item label="邮箱:">
                <el-input v-model="form.email" placeholder="请输入邮箱" />
              </el-form-item>
              <el-form-item label="岗位:">
                <el-input v-model="form.position" placeholder="请输入岗位" />
              </el-form-item>
              <el-form-item label="备注:">
                <el-input v-model="form.remarks" placeholder="请输入备注" />
              </el-form-item>
              <el-form-item label="紧急联系人姓名:">
                <el-input v-model="form.emergencyContactName" placeholder="请输入紧急联系人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别:">
                <el-select v-model="form.gender">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
              <el-form-item label="联系电话:">
                <el-input v-model="form.phone" placeholder="请输入联系电话" />
              </el-form-item>
              <el-form-item label="入职日期:">
                <el-date-picker
                  v-model="form.hireDate"
                  style="width: 100%"
                  placeholder="请输入入职日期"
                />
              </el-form-item>
              <el-form-item label="部门:">
                <el-input v-model="form.department" placeholder="请输入部门" />
              </el-form-item>
              <el-form-item label="工作经历:">
                <el-input v-model="form.workExperience" placeholder="请输入工作经历" />
              </el-form-item>
              <el-form-item label="紧急联系人联系方式:">
                <el-input
                  v-model="form.emergencyContactPhone"
                  placeholder="请输入紧急联系人联系方式"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="button">
          <el-button type="primary" @click="returnView">返回</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button v-if="form.employeeId" type="primary" @click="deleteEmployee">删除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.editEmployee {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/image/main/MainBg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 90%;
  height: 90%;
  background-color: rgba(7, 83, 265, 0.3);
}

.title {
  height: 10%;
  width: 100%;
  background-color: #0a4dcf;
  color: #fff;
  font-size: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-form-item__label) {
  color: #b3f6fd;
}

:deep(.el-input__wrapper) {
  background-color: #0054f8;
  box-shadow: none;
}

:deep(.el-input__inner::placeholder) {
  color: #fff;
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-select__wrapper) {
  background-color: #0054f8;
  box-shadow: none;
}

:deep(.el-select__placeholder) {
  color: #fff;
}

:deep(.avatar-uploader) .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader) .el-upload:hover {
  border-color: var(--el-color-primary);
}

:deep(.el-icon).avatar-uploader-icon {
  font-size: 28px;
  color: #fff;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
